<template>
  <div class="c-pb100 copyNot c-bg-sgray">
    <div v-if="testRes!=null" class="theme-bg-gradient bg-top c-ph24 c-text-hidden ">
      <div v-if="(testRes.scoringMethod==2 || testRes.scoringMethod==1 || testRes.isRemark == 4) && testRes.isHideScore != 1 && testRes.isRemark != 6" class="c-fs28 c-fc-white c-mt28">您的得分为{{Number(testRes.totalpoins).toFixed(1)}}分</div>
      <div v-if="testRes.scoringMethod==3 && testRes.isHideScore != 1 && testRes.isRemark != 6" class="c-fs28 c-fc-white c-mt28">您答对了{{testRes.rightNum}}题</div>
      <div :class="testRes.isHideScore != 1 && testRes.isRemark != 6 ? 'c-mt28' : 'c-mt90'" class="c-bg-white c-br16 c-pt24 c-pb32 c-ph24">
        <div class="c-fs24 c-fc-xblack c-fw500" v-if="testRes.remarkTitle&&testRes.enableScoreResult==1">测试结果</div>
        <div class="c-fs22 c-fc-xblack c-mt16" v-if="testRes.remarkTitle&&testRes.enableScoreResult==1">{{testRes.remarkTitle}}</div>
        <div class="c-fs24 c-fc-xblack c-fw500" :class="testRes.remarkTitle ? 'c-mt28' : ''">结果描述</div>
        <div class="c-fs22 c-fc-xblack c-mt16" v-if="testRes.remarkType == 1">{{review}}</div>
        <div v-if="testRes.remarkType == 2" v-html="review" class="c-mt16 c-fs22 c-lh36 c-fc-xblack c-ww-bw c-ww-ba c-contexty-scroll rich-text"></div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-mt32">
          <div :class="testRes && testRes.isOpenShare==1 ? 'w47' : 'c-w100'" v-if="testRes && testRes.enableResurvey==1" @click="goReTest" class="c-fs24 theme-fc theme-bd1 c-flex-row c-flex-center c-hh60 c-br32">重新测试</div>
          <div :class="testRes && testRes.enableResurvey==1 ? 'w47' : 'c-w100'" v-if="testRes.isOpenShare==1" @click="examShare(1)" class="c-fs24 c-fc-white theme-bg-gradient c-flex-row c-flex-center c-hh60 c-br32">生成长图分享</div>
        </div>
      </div>
      <div v-if="(testRes.conditionType==1||testRes.hasBought)">
        <div v-if="testRes.isRemark == 6 && (testRes.enableScoreAnalysis == 1 || testRes.enableScoreAnalysis == 2) && testRes.scoreAnalysis && testRes.scoreAnalysis.length > 0" class="c-bg-white c-br16 c-mt24 c-pt24 c-pb60 c-ph24">
          <div class="c-fs24 c-fc-xblack c-fw500">得分分析</div>
          <div v-if="testRes.isRemark == 6 && testRes.enableScoreAnalysis == 1 && testRes.scoreAnalysis && testRes.scoreAnalysis.length > 0">
            <div class="c-pt4">
              <div v-for="(item, index) in testRes.scoreAnalysis" :key="index" class="c-flex-row c-aligni-center c-justify-sb c-pt16">
                <div class="c-fs24 c-fc-xblack c-flex-grow1 c-w0 c-text-ellipsis1">{{item.name}}</div>
                <div class="c-fs24 c-fc-xblack c-flex-shrink0 c-ml40">{{testRes.dimensionType == 1 ? (Number(item.score) + '分') : item.count}}</div>
              </div>
            </div>
            <div class="c-p">
              <div class="c-p c-ml68 c-mt24 c-flex-row c-bd-l1">
                <div v-for="(item, index) in 10" :key="index" :style="'height: ' + (0.15 + testRes.scoreAnalysis.length * 1.6) +'rem'" class="c-flex-grow1 c-bd-r1 c-hh142 c-p">
                  <div v-if="testRes.dimensionType == 1" class="c-pa c-fs14 c-fc-gray num-position">{{Number(coordinateNum((index + 1) * (testRes.maxDimensionScore/10)))}}</div>
                  <div v-if="testRes.dimensionType == 2" class="c-pa c-fs14 c-fc-gray num-position">{{Number(coordinateNum((index + 1) * (testRes.optionTotalNum/10)))}}</div>
                </div>
                <div class="c-pa c-fs14 c-fc-gray zero-position">0</div>
              </div>
              <div v-for="(item, index) in testRes.scoreAnalysis" :key="index" class="c-pa c-p-l0 c-w100 c-flex-row c-aligni-center" :style="'top: ' + (0.15 + index * 1.6) +'rem'">
                <div class="c-fs14 c-fc-gray c-ww68 c-text-ellipsis2">{{item.name}}</div>
                <div class="c-w0 c-flex-grow1">
                  <div v-if="testRes.dimensionType == 1" class="c-hh32 theme-bg" :style="'width:' + Number(item.score / testRes.maxDimensionScore * 100) + '%'"></div>
                  <div v-if="testRes.dimensionType == 2" class="c-hh32 theme-bg" :style="'width:' + Number(item.count / testRes.optionTotalNum * 100) + '%'"></div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="testRes.isRemark == 6 && testRes.enableScoreAnalysis == 2 && testRes.scoreAnalysis && testRes.scoreAnalysis.length > 0">
            <img id="chartImg" src="" alt="">
            <div class="c-flex-row c-flexw-wrap">
              <div class="c-flex-row c-alignc-center c-mt10 c-mr10" v-for="(item, index) in angleList" :key="index">
                <div :style="'background:' + chartRandomColor(index)" class="c-ww24 c-hh24"></div>
                <div class="c-fs24 c-fc-xblack c-ml16 c-ww130 c-text-ellipsis1">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="testRes.isRemark == 6 &&(testRes.conditionType==1||testRes.hasBought) && testRes.resultAndAdvise&&testRes.resultAndAdvise.length > 0" class="c-bg-white c-br16 c-mt24 c-pt24 c-pb60 c-ph24">
          <div class="c-fs24 c-fc-xblack c-fw500 c-pb4">结果及建议</div>
          <div class="c-mt20 c-pv24 c-ph24 c-bg-sgray" v-for="(item, index) in testRes.resultAndAdvise" :key="index">
            <div class="c-flex-column">
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs24 theme-fc c-text-ellipsis1 c-ww360">{{item.name}}</div>
                <div class="c-fs24 theme-fc c-ml6">{{testRes.dimensionType==1?(testRes.dimensionScoreType==1?'(得分'+Number(item.score) + '分)':'(平均分'+Number(item.score) + '分)'):'(选择'+Number(item.count) + '次)'}}</div>
              </div>
              <div class="c-p c-mt12 c-flex-row">
                <div class="c-fs22 c-fc-sblack  c-lh36 c-ww-bw c-contexty-scroll" v-html="item.result.advise"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- v-if="testRes.conditionType==2&&!testRes.hasBought" -->
      <div v-if="testRes.conditionType==2&&!testRes.hasBought">
        <div class="c-bg-white c-br16 c-mt24 c-pt24 c-pb60 c-ph24">
          <div class="c-flex-row c-aligni-center c-justify-center">
            <div class="c-ww84 c-hh16"><img :src="require('../../../assets/i/wap/exam/icon_left.png')" alt=""></div>
            <div class="c-fs28 c-fc-xblack c-fw500 c-ph8">
              已为您生成深度的分析报告
            </div>
            <div class="c-ww84 c-hh16"><img :src="require('../../../assets/i/wap/exam/icon_right.png')" alt=""></div>
          </div>
          <div class="c-mt8 c-pv24 c-ph32 c-flex-row">
            <div class="c-ww210 c-maxh140 c-text-hidden c-br8">
              <img class="c-w100 c-br8" :src="$addXossFilter(testRes.avatar, require('../../../assets/defult270.png'))" @error="testRes.avatar= require('../../../assets/defult270.png')" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
              <div class="c-fs24 c-fc-sblack c-text-ellipsis2">{{testRes.name}}</div>
            </div>
          </div>
          <div @click="payShowResult" class="c-fs24 c-fc-white theme-bg-gradient c-flex-row c-flex-center c-hh60 c-br32">{{ testRes.resultPrice }}元解锁专属测评报告</div>
        </div>
      </div>
      <div v-if="testRes.courseInfo && testRes.courseInfo.length > 0 && testRes.isCheck!=-1" class="c-bg-white c-br16 c-mt24 c-pt24 c-pb32 c-ph24">
        <div class="c-fs24 c-fc-xblack c-fw500">推荐课程</div>
        <div @click="clickGoDetails(item.linkType, item.id)" class="c-flex-row c-mt24" v-for="(item, index) in testRes.courseInfo" :key="index">
          <div class="c-ww210 c-maxh140 c-text-hidden c-br8">
            <img class="c-w100 c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="">
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
            <div class="c-flex-row">
              <div class="c-fs18 c-fc-white c-ph8 c-hh30 c-br4 theme-bg c-lh32">{{productType[item.linkType]}}</div>
            </div>
            <div v-if="item.price && item.linkType == 7">
              <span class="theme-fc c-fs22" v-if="item.price.split('~')[0]!=item.price.split('~')[1] || Number(item.price.split('~')[0]) !=0">{{'￥' | iosPriceFilter}}</span><span class="theme-fc" :class="item.price.split('~')[0]==item.price.split('~')[1] && (Number(item.price.split('~')[0])==0) ? 'c-fs24' : 'c-fs26'">{{item.price.split('~')[0]==item.price.split('~')[1] && (Number(item.price.split('~')[0])==0) ? '免费' : item.price.split('~')[0]==item.price.split('~')[1] ? item.price.split('~')[0] :item.price.split('~')[0]+'起'}}</span>
            </div>
            <div v-else :class="Number(item.price) == 0 ? 'c-fs24' : 'c-fs26'" class="theme-fc">
              <span class="c-fs22" v-if="item.payType== 2||(item.linkType==41&& item.payType == 4)">{{'￥' | iosPriceFilter(item.optimal)}}</span>
              <span>{{item.payType | priceValueFilter(item.price, item.linkType, item.optimal)}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showOptionResule" class="c-ph24 c-pt120 c-h c-pf c-pz99 c-p-t0 c-p-l0 c-w100 c-bg-white c-contexty-scroll">
      <div class="c-mb80" v-for="(item,index) in optionResult" :key="index">
        <div v-show="index == 0 || showAllOp" class="c-bg-f3 c-pt44 c-pb44 c-hh500 c-ph24 c-content-scroll c-br10">
          <div class="c-fs36 c-lh50 c-fc-xblack c-textAlign-c">{{item.title}}</div>
          <div class="c-fc-sxblack c-fs28 c-lh50 c-mt28" v-html="item.comment"></div>
        </div>
        <div class="c-mt32 c-pt28 c-bd-t1 c-ph24" v-if="index == 0 && testRes && testRes.courseInfo && testRes.courseInfo.length > 0">
          <div class="c-fs28 c-fc-xblack">相关推荐</div>
          <div class="c-mt28" v-for="(item, index) in testRes.courseInfo" :key="index">
            <div class="c-flex-row" @click="clickGoDetails(item.linkType, item.id)">
              <div class="c-ww160 c-flex-shrink0 c-maxh106 c-text-hidden c-br6">
                <template v-if="item.linkType == 8">
                  <img v-if="item.cover" class="c-w100 c-center imgCloseBig" :src="$addXossFilter(item.cover)" alt="" />
                  <img v-else-if="OFFICE_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_doc.png" alt="" />
                  <img v-else-if="IMG_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_pic.png" alt="" />
                  <img v-else-if="AUDIO_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_audio.png" alt="" />
                  <img v-else-if="VIDEO_TYPE.indexOf(item.format) > -1" class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_video.png" alt="" />
                  <img v-else class="c-ww100 c-center imgCloseBig" src="../../../assets/i/wap/datum/icon_com.png" alt="" />
                </template>
                <img v-else class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" @error="item.cover = require('../../../assets/defult270.png')" alt="" />
              </div>
              <div class="c-flex-column c-justify-sb c-maxh106 c-flex-grow1 c-pl20 c-w0">
                <div class="c-fs22 c-lh32 c-text-ellipsis1 c-fc-xblack">{{item.name}}</div>
                <!-- 课程展示讲师 -->
                <div class="c-fs18 c-fc-gray" v-if="item.prodType == ckFrom.course">讲师：{{item.teacherName!=''&&item.teacherName!=null?item.teacherName:'未知'}}</div>
                <div class="c-flex-row c-justify-sb c-w100">
                  <div class="c-fs18 c-fc-white c-ph8 c-hh30 c-br4 theme-bg c-flex-row c-flex-center">{{productType[item.linkType]}}</div>
                  <!-- 资料加密判断 -->
                  <div class="c-fs22  theme-fc" v-if="item.linkType != 8 && item.permission == 21">
                    加密
                  </div>
                  <!-- 活动不展示价格 -->
                  <div class="c-fs22  theme-fc" v-else-if="item.linkType != 7">
                    <span class="c-fs22" v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter(item.optimal)}}</span>
                    <!-- 商城商品价格 -->
                    <span v-if="item.linkType == 12">{{Number(item.price) == 0 ? '免费' : item.price}}</span>
                    <span v-else>{{item.payType | priceValueFilter(item.price, item.prodType, item.optimal)}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="showAllOpT" v-show="!showAllOp && optionResult && optionResult.length > 1" class="c-fs24 c-fc-smblue c-mt40 c-textAlign-c">更多></div>
      <div v-if='optionResult' class="c-mt40 c-flex-row c-flex-center c-pb60">
        <div @click="examShare(1)" class="c-flex-row c-flex-center c-fs24 c-textAlign-c c-ww180 c-hh64 c-lh64 c-br36 c-fc-sblack c-bd1-gray">分享</div>
        <div v-if="testRes && testRes.enableResurvey==1" :class="isResurvey ? 'c-fc-sblack c-bd1-gray' : 'c-fc-sgray c-bd1-ccc'" @click="goTest(1)" class="c-flex-row c-flex-center c-fs24 c-textAlign-c c-ww180 c-hh64 c-lh64 c-br36 c-ml20">重新测试</div>
      </div>
    </div>
    <canvas class="c-pa ancyCanvas"></canvas>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
// const CANVAS_WIDTH = 750;
// const CANVAS_HEIGHT = 1334;
export default {
  name: "MutuaResult",
  components: {
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      OFFICE_TYPE: ["doc", "docx", "pdf", "ppt", "pptx", "xls", "xlsx"],
      IMG_TYPE: ["bmp", "jpg", "png", "gif", "svg", "psd", "webp", "jpeg", "eps", "tga", "tiff"],
      AUDIO_TYPE: ["ogg", "mp3", "wav", "asf", "wma", "mp3pro", "real", "ape", "module", "midi", "vqf"],
      VIDEO_TYPE: ["avi", "wmv", "mpeg", "asf", "mpg", "dv", "rm", "rmvb", "mod", "flv", "mp4", "qt", "divx", "mkv", "vob"],
      review: '',
      answerCardList: [],
      testRes: null,
      paperMainId: -1,
      topicId: -1,
      showCer: false,
      isDrawing: false,
      examinationInfo: null,
      isResurvey: false, //支持重测，重测时间是否已到
      optionResult: '', //选项测试，没有答题卡
      showOptionResule: false,
      showAllOp: false,
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
      playedDuration: 0,
      cfrom: global.ckFrom,
      productType: {
        1051: '视频',
        1052: '音频',
        1053: '图文',
        9: '专栏',
        51: '直播',
        7: '活动',
        61: '知识套餐',
        78: '训练营',
        41: '打卡',
        10: '社群',
        8: '资料',
        75: '互动测评',
        77: '语音测试',
        11: '测评',
        12: '商城商品'
      },
      bindPhoneSetting: null,
      angleList:[],
      ckFrom: global.ckFrom
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("测试结果");// eslint-disable-line
    this.topicId = 0;
    this.paperMainId = this.$route.query.paperMainId;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.playedDuration = this.$route.query.playedDuration || 0;
    this.setProgress();
    this.testRes = null;
    this.answerCardList = [];
    this.examinationInfo = null;
    this.showAllOp = false;
    this.optionResult = '';
    let $this = this;
    getBindPhoneSetting(global.ckFrom.mutuaTest).then(res => {
      this.bindPhoneSetting = res;
    });
    if (this.$route.query.isOption == 1) {
      utilJs.getMethod(global.apiurl + 'mutual/optionResult/' + this.$route.query.examId, function (res) {
        $this.optionResult = res;
      });
      //获取测试结果数据
      utilJs.getMethod(global.apiurl + 'exam/completeTest/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
        $this.testRes = res;
        let nt = (new Date()).getTime();
        let lt = utilJs.getTimeByDate($this.testRes.lastJoinTime);
        if (($this.testRes.intervalTime != 0) && (lt + $this.testRes.intervalTime * 60 * 60 * 1000 > nt)) {
          $this.isResurvey = false;
        } else {
          $this.isResurvey = true;
        }
        if ($this.testRes.isRemark != -1) {
          $this.review = $this.testRes.remark;
        } else {
          $this.review = '';
        }
        if ($this.testRes.isRemark == 6 && $this.testRes.enableScoreAnalysis == 2 && $this.testRes.scoreAnalysis && $this.testRes.scoreAnalysis.length > 0) {
          $this.$nextTick(() => {
            $this.chartInit()
          })
        }
      });
    } else {
      //获取测试结果数据
      utilJs.getMethod(global.apiurl + 'exam/completeTest/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
        $this.testRes = res;
        let nt = (new Date()).getTime();
        let lt = utilJs.getTimeByDate($this.testRes.lastJoinTime);
        if (($this.testRes.intervalTime != 0) && (lt + $this.testRes.intervalTime * 60 * 60 * 1000 > nt)) {
          $this.isResurvey = false;
        } else {
          $this.isResurvey = true;
        }
        if ($this.testRes.isRemark != -1) {
          $this.review = $this.testRes.remark;
        } else {
          $this.review = '';
        }
        if ($this.testRes.isRemark == 6 && $this.testRes.enableScoreAnalysis == 2 && $this.testRes.scoreAnalysis && $this.testRes.scoreAnalysis.length > 0) {
          $this.$nextTick(() => {
            $this.chartInit()
          })
        }
      });
      //获取答题卡数据
      utilJs.getMethod(global.apiurl + 'exam/answerCard/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
        $this.answerCardList = res.answerSheet;
        for (let i = 0; i < res.notAnswerNum; i++) {
          $this.answerCardList.push('');
        }
      });
    }
    utilJs.getMethod(global.apiurl + "mutual/detail/" + this.paperMainId,
      function (res) {
        if (res.permission == false) {
          $this.$routerGo($this, "push", {
            path: "/homePage/mutuaTest/mutuaTestDetail",
            query: { mutuaTestId: $this.paperMainId }
          });
        } else {
          $this.examinationInfo = res;
          if ($this.examinationInfo.paperType == 3) {
            $this.showOptionResule = true;
          } else {
            $this.showOptionResule = false;
          }
          $this.wechatShare();
        }
      }
    );
  },
  deactivated() {
    this.optionResult = '';
    this.setProgress();
  },
  mounted() { },
  computed: {},
  watch: {},
  methods: {
    payShowResult() {
      // prodType210
      let pathQuery = {
        extId: this.paperMainId,
        ckFrom: global.ckFrom.mutuaTestResult,
        isFromInvite: 0,
        cId: -1,
      }
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: pathQuery
      });
    },
    coordinateNum(num) {
      return Number(utilJs.toMyFixed2(num))
    },
    clickGoDetails(type, id) {
      let courseType = type == 1051 ? 0 : type == 1052 ? 1 : type == 1053 ? 2 : '';
      let prodType = type == 1051 || type == 1052 || type == 1053 ? global.ckFrom.course : type;
      goDetails(this, prodType, id, '', courseType)
    },
     // 记录播放进度
    setProgress: function () {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: this.progress, //完成进度0-100
        duration: this.playedDuration > 0 ? this.playedDuration : 0
      }
      utilJs.postMethod(`${global.apiurl}k12/trainings/progress`, data, res => {
      });
    },
    showAllOpT() {
      this.showAllOp = true;
    },
    examShare: function (eId) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: '/homePage/examination/examinationSpread',
        query: { paperMainId: this.paperMainId, topicId: this.topicId, isFromMutua: 1 }
      });
    },
    goReTest: function (eId) {
      utilJs.getMethod(global.apiurl + 'mutual/isRePay/' + this.paperMainId, res => {
        if (res.isRePay == 1 && this.testRes.hasPermission == false) {
          this.$cjConfirm({
            message: '重测需要再次购买？',
            onConfirm:() => {
              let pathQuery = {
                cId: -1,
                extId: this.testRes.prodId,
                ckFrom: this.cfrom.mutuaTest,
                isFromInvite: 0
              };
              this.$routerGo(this, "replace", {
                path: '/homePage/course/coursePay',
                query: pathQuery
              });
            }
          })
        } else {
          this.goTest();
        }
      })
      //    this.$emit("testAgain",eId);
    },
    goTest() {
      let nt = (new Date()).getTime();
      let lt = utilJs.getTimeByDate(this.testRes.lastJoinTime);
      if ((this.testRes.intervalTime != 0) && (lt + this.testRes.intervalTime * 60 * 60 * 1000 > nt)) {
        let interval = lt + (this.testRes.intervalTime * 60 * 60 * 1000) - nt;
        let secondTime = parseInt(interval / 1000);
        let minuteTime = 0;
        let hourTime = 0;
        if (secondTime > 60) {
          minuteTime = parseInt(secondTime / 60);
          secondTime = parseInt(secondTime % 60);
          if (minuteTime > 60) {
            hourTime = parseInt(minuteTime / 60);
            minuteTime = parseInt(minuteTime % 60);
          }
        }
        let showTime = minuteTime > 0 ? (hourTime > 0 ? (hourTime + '时' + minuteTime + '分' + secondTime + '秒') : (minuteTime + '分' + secondTime + '秒')) : (secondTime + '秒')
        this.$showCjToast({
          text: '请在' + showTime + '后重测',
          type: "text",
        });
      } else {
        let $this = this;
        utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=' + this.topicId, function (res) {
          $this.$routerGo($this, "replace", {
            path: "/homePage/mutuaTest/mutuaAnswer",
            query: { paperMainId: $this.paperMainId, topicId: $this.topicId, goOnNum: 1 }
          });
        })
      }
    },
    wechatShare: function () {
      let title = this.examinationInfo.name;
      let shareImg = this.examinationInfo.avatar || require('../../../assets/examination_defult.png');
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/mutuaTest/mutuaTestDetail?mutuaTestId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.examinationInfo.description;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.examinationInfo.name;
      let shareImg = this.examinationInfo.avatar || require('../../../assets/examination_defult.png');
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/mutuaTest/mutuaTestDetail?mutuaTestId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.examinationInfo.description;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //初始化饼状图
    chartInit() {
        let canvas = document.querySelector("canvas");
        canvas.width = 450;
        canvas.height = 450;
        let ctx = canvas.getContext("2d");
        //获取画布的中心
        this.x0 = ctx.canvas.width / 2;
        this.y0 = ctx.canvas.height / 2;
        //获取半径
        this.radius = 150;
        //标题伸出去的距离
        this.outLine = 20;
        //添加饼图
        //1、将数据转为弧度
        this.angleList = this.chartDrawAngle();
        var start = 0;//起始弧度
        this.angleList.forEach(function (item, i) {
            var end = item.angle + start;
            ctx.beginPath();
            ctx.moveTo(this.x0, this.y0);
            ctx.arc(this.x0, this.y0, this.radius, start, end);
            ctx.fillStyle = this.chartRandomColor(i);
            ctx.fill();
            //调用标题的方法
            // this.chartDrawTitle(start, item, ctx.fillStyle, ctx);
            //斜边的长度
            var edge = this.radius + this.outLine;
            //x轴方向的直角边
            var edgeX = edge * Math.cos(start + item.angle / 2);
            //y轴方向的直角边
            var edgeY = edge * Math.sin(start + item.angle / 2);
            //伸出去的横纵坐标
            var outX = this.x0 + edgeX;
            var outY = this.y0 + edgeY;
            ctx.beginPath();
            ctx.moveTo(this.x0, this.y0);
            ctx.lineTo(outX, outY);
            ctx.strokeStyle = ctx.fillStyle;
            ctx.stroke();
            //添加字体
            var align = outX > this.x0 ? "left" : "right";
            ctx.font = 20 + "px Helvetica Neue,Helvetica,Roboto,Arial,sans";
            ctx.textAlign = align;
            ctx.textBaseline = "bottom";
            ctx.fillText(item.title, outX, outY);
            //添加文字下面的线
            var textW = ctx.measureText(item.title).width;
            ctx.moveTo(outX, outY);
            outX = outX > this.x0 ? outX + textW : outX - textW;
            ctx.lineTo(outX, outY);
            ctx.stroke();


            //调用画小矩形
            // this.chartDrawInfo(i, item.title, ctx.fillStyle, ctx);
            // ctx.beginPath();
            // //画小矩形
            // ctx.fillRect(this.spaceX, this.spaceY * i + this.smallH, this.smallW, this.smallH);
            // //画文字
            // ctx.font = "12px 微软雅黑";
            // ctx.fillStyle = ctx.fillStyle;
            // ctx.textAlign = "left";
            // ctx.fillText(item.title, this.spaceX * 2 + this.smallW, this.spaceY * i + this.smallH * 2);
            //记录上一个结束的弧度
            start = end;
        }.bind(this));
        this.canvasChartImg(ctx)
    },
    //将canvas转成图片
    canvasChartImg(ctx) {
      try {
        console.log(ctx)
        var dataURL = ctx.canvas.toDataURL("image/jpg");
        let ig = document.getElementById("chartImg");
        ig.setAttribute("src", dataURL);
      } catch (err) {
        console.log(ctx)
      }
    },
    //添加转化弧度的方法
    chartDrawAngle() {
        let scoreAnalysis = this.testRes.scoreAnalysis
        let data = []
        let analysis = {}
        scoreAnalysis.forEach((item) => {
          analysis = {
            name : item.name,
            title : this.testRes.dimensionType == 1 ? Number(item.score / this.testRes.totalScore * 100).toFixed(1) + '%' : Number(item.count / this.testRes.optionTotalNum * 100).toFixed(1) + '%',
            num : this.testRes.dimensionType == 1 ? item.score : item.count
          }
          data.push(analysis)
        });
        //先获取数据的总和
        let total = this.testRes.dimensionType == 1 ? this.testRes.totalScore : this.testRes.optionTotalNum;
        //获取每条数据的弧度
        data.forEach(function (item, index) {
            var angle = item.num / total * Math.PI * 2;
            item.angle = angle;
        });
        console.log(data)
        return data;
    },
    //随机颜色1
    chartRandomColor (index) {
      let colorData = [
          "(254, 80, 79, 1)",
          "(246, 116, 35, 1)",
          "(250, 196, 75, 1)",
          "(83, 227, 99, 1)",
          "(125, 166, 253, 1)",
          "(107, 114, 246, 1)",
          "(209, 117, 242, 1)",
          "(203, 77, 248, 1)",
          "(141, 62, 220, 1)",
          "(170, 115, 78, 1)",
          "(100, 202, 217, 1)",
          "(245, 152, 79, 1)",
          "(243, 127, 173, 1)",
          "(130, 209, 171, 1)",
          "(243, 111, 110, 1)",
          "(5, 198, 148, 1)",
          "(208, 71, 160, 1)",
          "(176, 216, 71, 1)",
          "(247, 237, 106, 1)",
          "(95, 114, 149, 1)"]
        let rgbColor = "rgba" + colorData[index % 20]
        return rgbColor;
    }
    //创建数据
    // var data = [
    //     {title: "20岁以下", num: 6},
    //     {title: "20-25岁", num: 30},
    //     {title: "25-30岁", num: 20},
    //     {title: "30岁以上", num: 4},
    // ];
    // var pieChart = new PieChart();
    // pieChart.init();//初始化
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-maxh106 {
  max-height: 2.65rem;
}
.btn-wrap {
  width: 100%;
  max-width: 640px;
  border-top: 1px solid #ddd;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 11;
}
.btn-next-question {
  font-size: 0.7rem;
  height: 2.1rem;
}
.c-hh250 {
  height: 6.25rem;
}
.c-point-bd {
  border: 0.22rem solid #d6ecfa;
}
.accuracy-wrap {
  width: 5.8rem;
  height: 5.8rem;
}
.c-www500 {
  width: 12.5rem;
}
.rate-color {
  color: #0f72a1;
}
@keyframes waveMove {
  from {
    left: 0;
  }
  to {
    left: -6.25rem;
  }
}
@-moz-keyframes waveMove /* Firefox */ {
  from {
    left: 0;
  }
  to {
    left: -6.25rem;
  }
}
@-webkit-keyframes waveMove /* Safari 和 Chrome */ {
  from {
    left: 0;
  }
  to {
    left: -6.25rem;
  }
}
@-o-keyframes waveMove /* Opera */ {
  from {
    left: 0;
  }
  to {
    left: -6.25rem;
  }
}

.wave-img {
  animation: waveMove 6s linear infinite;
  /* Firefox: */
  -moz-animation: waveMove 6s linear infinite;
  /* Safari 和 Chrome: */
  -webkit-animation: waveMove 6s linear infinite;
  /* Opera: */
  -o-animation: waveMove 6s linear infinite;
}
.c-ww480 {
  width: 12rem;
}
.c-bg-draw {
  background-color: #fa875d;
}
.block-center {
  margin-left: auto;
  margin-right: auto;
}
.c-ph72 {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
.bg-top {
  background-size: 100% 6.5rem;
  background-repeat:no-repeat ;
}
.num-position {
  right: -4px;
  bottom: -14px;
}
.zero-position {
  left: -2px;
  bottom: -14px;
}
.title-position {
  left: -1.5rem;
  top: 0.15rem;
}
.w47 {
  width: 47%;
}
.ancyCanvas{
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
</style>
